/*
 * @Description:  虚线
 * @Author: knight
 * @Date: 2019-07-03 11:13:52
 * @LastEditors: zhangyukele
 * @LastEditTime: 2019-09-25 15:02:13
 */

import React, { Component } from 'react';
import {
  Text,
  View,
  StyleSheet,
} from 'react-native';
import PropTypes from 'prop-types'


export default class BD_dashed extends Component {

  static propTypes = {
    lineWidth: PropTypes.number,//小虚线长度
    lineSpace: PropTypes.number,//虚线间隔
    width: PropTypes.number.isRequired, //总线段长度
    color: PropTypes.string, //虚线颜色
    flexD: PropTypes.oneOf(['column', 'row']), //column纵向  row 横向
    lineWeight: PropTypes.number,//虚线的宽度

  }

  static defaultProps = {
    width: 99,
    color: 'red',
    flexD: 'row',
    lineWidth: 2,
    lineSpace: 2,
    lineWeight: 1
  }


  render() {
    // flexD :row , column
    let { len, flexD, color , width ,lineWidth ,lineSpace, lineWeight } = this.props;
    let arr = [];
    let _style = {}
    let _dashItem = null;
    let lens = width / (lineWidth + lineSpace);
    for (let i = 0; i <= lens; i++) {
      arr.push(i);
    }



    if (flexD === "column") {
      _style.height = width;
      _dashItem = {
        height: lineWidth,
        width: lineWeight,
        marginTop: lineSpace,
      }
    } else { // row
      _style.width = width;
      _dashItem = {
        height: lineWeight,
        width: lineWidth,
        marginRight: lineSpace,
      }
    }
    // console.log(_style, "_style")
    return <View style={[{ flexDirection: flexD}, _style]}>
      {
        arr.map((item, index) => {
          return <Text style={[_dashItem, { backgroundColor: color }]}
            key={'dash' + index}></Text>
        })
      }
    </View>
  }
}
